<template>
  <div>
    <el-dialog v-model="state.isShowDialog" draggable width="600px">
      <template #header>
        <div style="color: #ffffff">
          <el-icon size="16" style="display: inline; margin-right: 3px; vertical-align: middle"> <Edit /> </el-icon>
          <span> {{ props.title }} </span>
        </div>
      </template>
      <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('message.orgInfo.parentOrg')">
              <el-cascader
                :options="props.orgData"
                :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'orgName' }"
                :placeholder="$t('message.orgAlter.parentOrgEmpty')"
                clearable
                style="width: 100%"
                v-model="state.ruleForm.parentId"
              >
                <template #default="{ node, data }">
                  <span>{{ data.orgName }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item
              :label="$t('message.orgInfo.orgName')"
              prop="orgName"
              :rules="[{ required: true, message: t('message.orgAlter.orgNameEmpty'), trigger: 'blur' }]"
            >
              <el-input v-model="state.ruleForm.orgName" :placeholder="$t('message.orgInfo.orgName')" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item
              :label="$t('message.orgInfo.orgCode')"
              prop="code"
              :rules="[{ required: true, message: t('message.orgAlter.orgCodeEmpty'), trigger: 'blur' }]"
            >
              <el-input v-model="state.ruleForm.code" :placeholder="$t('message.orgInfo.orgCode')" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('message.orgInfo.orgType')" prop="category">
              <el-select
                v-model="state.ruleForm.category"
                :placeholder="$t('message.orgInfo.orgType')"
                :rules="[{ required: true, message: t('message.orgAlter.orgTypeEmpty'), trigger: 'blur' }]"
              >
                <el-option v-for="d in props.dictData" :key="d.id" :label="d.name" :value="d.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('message.orgInfo.remark')">
              <el-input v-model="state.ruleForm.remark" :placeholder="$t('message.orgInfo.remark')" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" size="default">{{ $t("message.commonBtn.cancel") }}</el-button>
          <el-button type="primary" @click="submit" size="default">{{ $t("message.commonBtn.submit") }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="sysEditOrg">
import { reactive, ref } from "vue";
import { feature } from "@/utils/axios-utils";
import { SysOrg, DictData } from "@/api-services/models/system";
import { useI18n } from "vue-i18n";
import orgApi from "@/api-services/apis/system/orgApi";
import { Edit } from "@element-plus/icons-vue";
import { NotificationError, NotificationSuccess } from "@/utils/notification";
// 定义变量内容
const { t } = useI18n();
const props = defineProps({
  title: String,
  orgData: Array<SysOrg.SysOrg>,
  dictData: Array<DictData.SysDictData>
});

const ruleFormRef = ref();
const state = reactive({
  isShowDialog: false,
  ruleForm: {} as SysOrg.OrgUpdateInput
});

// 打开弹窗
const openDialog = (row: SysOrg.SysOrg) => {
  state.ruleForm = JSON.parse(JSON.stringify(row));
  state.isShowDialog = true;
};

// 取消
const cancel = () => {
  state.isShowDialog = false;
};
// 与父组件的交互逻辑
const emits = defineEmits(["refresh"]);
// 提交
const submit = () => {
  ruleFormRef.value.validate(async (valid: boolean) => {
    if (!valid) return;
    let err: Error | null;
    if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
      [err] = await feature(orgApi.update(state.ruleForm));
    } else {
      [err] = await feature(orgApi.add(state.ruleForm));
    }
    if (err) {
      NotificationError(err.message);
    } else {
      NotificationSuccess(t("message.commontInfo.success"));
      emits("refresh");
      state.isShowDialog = false;
      state.ruleForm = {};
    }
  });
};

// 导出对象
defineExpose({ openDialog });
</script>
